<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<div id="app">
    <input type="button" value="浪起来" @click="lang">
    <br>
    <input type="button" value="低调" @click="stop">
    <br>
    {{message}}

</div>


<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let mv = new Vue({
        el: "#app",
        data: {

            message: "这是79期,三年工作经验的",
            intervalId: null
        },
        methods: {
            lang() {


                this.interval = setInterval(() => {
                    let start = this.message.substring(0, 1);
                    let end = this.message.substring(1);
                    this.message = end + start;

                }, 200)
            },
            stop() {
                clearInterval(this.interval);
            }


        },

        beforeCreate() {
            console.log("beforeCreate");
        },
        created() {
            //经常用
            //发送ajax请求
            console.log("created");
        },
        beforeMount() {
            console.log("beforeMount");
        },
        mounted() {
            //发送ajax 操作Dom
            console.log("mounted");
        },
        beforeUpdate() {
            console.log("beforeUpdate");
        },
        updated() {
            console.log("updated");
        },
        beforeDestroy() {
            //清空定时器
            console.log("beforeDestroy");
        },
       destroyed() {
           console.log("destroyed");
       }


    })


</script>




//创建阶段(create)
    //挂载阶段(mount)
    //
</body>
</html>